<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bywwwgzs | 个人博客</title>
    <!-- 引入Tailwind CSS -->
    <script src="../../zy/webside/st/tailwind.css"></script>
    <!-- 引入Font Awesome -->
    <link href="../../zy/webside/nd/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .card-hover {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark antialiased">
    <!-- 导航栏 -->
    <header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <!-- 博客logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                    <span class="font-bold text-xl">bywwwgzs</span>
                </a>
                
                <!-- 桌面导航菜单 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="font-medium text-primary transition-colors">首页</a>
                    <a href="article.html" class="font-medium hover:text-primary transition-colors">文章</a>
                    <a href="about.html" class="font-medium hover:text-primary transition-colors">关于</a>
                </nav>
                
                <!-- 移动菜单按钮 -->
                <button id="mobile-menu-button" class="md:hidden p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-bars text-gray-600"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="index.html" class="block py-2 font-medium text-primary transition-colors">首页</a>
                <a href="article.html" class="block py-2 font-medium hover:text-primary transition-colors">文章</a>
                <a href="about.html" class="block py-2 font-medium hover:text-primary transition-colors">关于</a>
            </div>
        </div>
    </header>

    <main class="pt-24 pb-16">
        <!-- 英雄区域 -->
        <section class="pt-16 pb-16 bg-gradient-to-b from-blue-50 to-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-3xl mx-auto text-center">
                    <h1 class="text-3xl md:text-4xl font-bold mb-6">
                        探索思想的<span class="text-primary">无限可能</span>
                    </h1>
                    <p class="text-gray-600 text-lg mb-8">
                        分享关于技术、生活与思考的点滴，记录成长的每一步足迹。
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center gap-4">
                        <a href="article.html" class="bg-primary hover:bg-primary/90 text-white font-medium px-6 py-3 rounded-lg transition-all shadow-lg hover:shadow-primary/20">
                            阅读文章
                        </a>
                        <a href="about.html" class="bg-white hover:bg-gray-50 text-dark border border-gray-200 font-medium px-6 py-3 rounded-lg transition-all shadow-md hover:shadow-lg">
                            关于我
                        </a>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 最新文章 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl md:text-3xl font-bold mb-12 text-center">最新文章</h2>
                
                <div class="max-w-4xl mx-auto">
                    <!-- 文章卡片 -->
                    <article class="bg-white rounded-xl shadow-lg overflow-hidden card-hover mb-8">
                        <div class="md:flex">
                            <div class="md:w-2/5">
                                <img src="../../zy/photo/picsum/id_0_600_400.jpg" alt="Hello World 编程概念图" class="h-full w-full object-cover">
                            </div>
                            <div class="md:w-3/5 p-6 md:p-8">
                                <div class="flex items-center mb-4">
                                    <span class="bg-blue-100 text-primary text-sm font-medium px-3 py-1 rounded-full">编程入门</span>
                                    <span class="text-gray-500 text-sm ml-4"><i class="fa fa-calendar-o mr-1"></i> 2025-10-08</span>
                                </div>
                                <h3 class="text-2xl font-bold mb-3">
                                    <a href="article.html" class="hover:text-primary transition-colors">Hello World：编程世界的第一步</a>
                                </h3>
                                <p class="text-gray-600 mb-4 line-clamp-3">
                                    对于每一位踏入编程世界的新手来说，"Hello World"程序都是他们编写的第一个程序。这个简单的程序虽然功能单一，仅仅是在屏幕上输出"Hello World"这句话，但它却承载着特殊的意义...
                                </p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <img src="../../zy/photo/picsum/id_1012_100_100.jpg" alt="作者头像" class="w-8 h-8 rounded-full object-cover">
                                        <span class="ml-2 text-sm font-medium">吕洞宾吖8204</span>
                                    </div>
                                    <a href="article.html" class="text-primary font-medium hover:underline">阅读更多 <i class="fa fa-arrow-right ml-1"></i></a>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        
        <!-- 关于博主简介 -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-4xl mx-auto text-center">
                    <h2 class="text-2xl md:text-3xl font-bold mb-8">关于博主</h2>
                    
                    <div class="bg-white rounded-2xl shadow-lg p-8">
                        <div class="flex flex-col md:flex-row items-center">
                            <img src="../../zy/photo/picsum/id_1012_200_200.jpg" alt="博主照片" class="w-32 h-32 rounded-full object-cover mb-6 md:mb-0 md:mr-8">
                            
                            <div class="text-center md:text-left">
                                <h3 class="text-2xl font-bold mb-3">吕洞宾吖8204</h3>
                                <p class="text-gray-600 mb-4">开发者 ｜ 白云万维网工作室室长</p>
                                
                                <p class="text-gray-700 mb-6 max-w-lg">
                                    我是一名开发者，热衷于探索新技术和分享知识。通过这个博客，我希望能记录自己的学习历程，并帮助更多人踏入编程的世界。
                                </p>
                                
                                <a href="about.html" class="inline-flex items-center text-primary hover:text-primary/80 font-medium transition-colors">
                                    了解更多 <i class="fa fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                        <span class="font-bold text-xl">bywwwgzs</span>
                    </div>
                    <p class="text-gray-400 text-sm">本网站由白云万维网工作室设计</p>
                </div>
                <p class="text-gray-500 text-sm">
                    &copy; 2025 bywwwgzs 博客. 保留所有权利.
                </p>
            </div>
        </div>
    </footer>
    
    <!-- JavaScript -->
    <script>
        // 移动菜单切换
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    </script>
</body>
</html>
